<template>
    <div class="page-wrap home">
        <el-card shadow="hover" class="card-module videoBox">
            <video :src="video" autoplay="autoplay" loop="loop" ref="vonVideo" muted="muted" controls preload="" class="abs" @click="pauseVideo">
            </video>
            <img src="../assets/workStation/pause.png" alt="" class="pause" v-if="showPause" @click="startVideo">
        </el-card>
        <el-card shadow="hover" class="card-module contentBox">
            <div class="materialList">
                <div class="materialItem" v-for="(item,index) in materialList" :key="index">{{item.materialName}}</div>
            </div>
        </el-card>
    </div>
</template>
<script>
import { exportJson2ExcelMulSheet, formatJson } from "@/common/index";
import { getRecipe, getDevice } from "../api/workStation/mainControl";
import { mapState } from "vuex";
let timer = null;
export default {
  data() {
    return {
      productId: "",
      deviceId: "",
      video: "",
      currentWarningIndex: "RED_WARN",
      area: "",
      areas: [],
      allData: {},
      rentData: {},
      barData: {},
      barDataNull: false,
      materialList: new Array(22).fill({ name: "物料一" }),
      showPause: false
    };
  },
  computed: {
    ...mapState({
      roleData: state => state.user.roleData,
      roleDataMap: state => state.user.roleDataMap,
      roleDataCodeMap: state => state.user.roleDataCodeMap,
      leafMenuList: state => state.menus.leafMenuList
    })
  },
  watch: {
    $route: {
      handler() {
        this.productId = this.$route.query.product;
        this.deviceId = this.$route.query.device;
        this.getDetail();
        //深度监听，同时也可监听到param参数变化
      },
      deep: true
    }
  },
  methods: {
    getDetail() {
      getRecipe({ id: this.productId }).then(res => {
        this.materialList = res.data.recipeMaterials;
      });
      getDevice({ id: this.deviceId }).then(res => {
        this.video = res.data.sopId;
      });
    },
    pauseVideo() {
      this.showPause = true;
      this.$refs.vonVideo.pause();
    },
    startVideo() {
      this.showPause = false;
      this.$refs.vonVideo.play();
    }
  }
};
</script>
<style lang='scss' scoped>
@import "../style/various.scss";
/deep/.el-card {
  background: rgba(67, 85, 110, 0.6) !important;
}
.home {
  padding: 0;
  .videoBox {
    height: 600px;
    position: relative;
    .abs {
      object-fit: fill;
      height: 596px;
      width: 100%;
    }
    .pause {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .contentBox {
    height: 234px;
    padding: 44px 0 0 16px;
    .materialList {
      display: flex;
      flex-wrap: wrap;
      .materialItem {
        width: 100px;
        margin-right: 20px;
        margin-bottom: 10px;
        line-height: 32px;
        text-align: center;
        height: 32px;
        background: linear-gradient(120deg, #302f43, #43556e);
        opacity: 0.6;
        border-radius: 4px;
        color: white;
        cursor: pointer;
        &:hover {
          background: $ThemeColor3;
          color: white;
          opacity: 1;
        }
      }
    }
  }
}
</style>
